// 验证当前用户是否登录
ckeckLogin()
// 渲染页面数据
renderUserName()
getData()
// 退出登录
document.querySelector('#logout').addEventListener('click', function () {
    // 删除token
    localStorage.removeItem('token')
    location.href = './login.html'
})


// 更新用户名
function renderUserName() {
    const username = localStorage.getItem('username')
    document.querySelector('.username').innerHTML = username
}
// 获取看板数据
async function getData() {
    const token = localStorage.getItem('token')
    // 避免提示两次，如果没有token直接退出
    if (!token) return
    const res = await axios({ url: '/dashboard' })
    // try {
    // 获取数据
    // const res = await axios({
    //     url: '/dashboard',
    //     // 请求头参数，headers
    //     headers: {
    //         Authorization: token
    //     }
    // })
    // 看板数据     data.data.overview
    renderOverview(res.data.overview)
    // } catch (err) {
    //     if (err.response.status === 401) {
    //         // token验证失败
    //         showToast('当前登录失效')
    //         // 清除token
    //         localStorage.removeItem('token')
    //         // 跳转登陆页面
    //         setTimeout(() => {
    //             location.href = './login.html'
    //         }, 1000)
    //     }else if(err.response.status === 403){
    //         // 当前用户无权限访问
    //     }
    // }
    //
    // console.log(res);

    let lineChart = renderLine(res.data.year)
    let BinChart = renderBin(res.data.salaryData)
    let zhuChart = zhu(res.data.groupData)
    let twoChart = twoBin(res.data.salaryData)
    let mapChart = map(res.data.provinceData)

    // 注册事件（使用闭包）
    window.addEventListener('resize', function () {
        lineChart()
        BinChart()
        zhuChart()
        twoChart()
        mapChart()
    })


}
// 更新预览卡片
function renderOverview(data) {
    // data 是渲染的数据
    for (let k in data) {
        if (k === 'age') {
            document.querySelector(`.${k}`).innerHTML = data[k].toFixed(2)
        } else {
            document.querySelector(`.${k}`).innerHTML = data[k]
        }
    }
}

// 渲染线性图
function renderLine(data) {
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
        title: {
            text: '2022全学科薪资走势', // 标题文本
            left: '3%',      // 将标题对齐到左边
            top: '3%'         // 将标题对齐到顶部
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: data.map((item) => item.month),
            axisLine: { // 设置X轴线样式
                lineStyle: {
                    type: 'dashed' // 将线型设置为虚线
                }
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 25000,
            interval: 5000,
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '薪资',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    // color: '#ffffff' // 设置数据点颜色为白色
                },
                lineStyle: {
                    width: 2 // 可选：调整线条宽度以确保白点清晰可见
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: 'rgba(68, 148, 255, 0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(68, 148, 255, 0)'
                        }]
                    )
                },
                // data: [10000, 20000, 19000, 18000, 21000, 19000, 20000, 21000, 12000, 25000, 22000, 16000]
                data: data.map((item) => item.salary),

            }
        ]
    };
    myChart.setOption(option)
    return function () {
        myChart.resize()
    }
}

//  渲染饼图
function renderBin(data) {
    const myChart = echarts.init(document.querySelector('#salary'))
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal', // 设置为水平方向
            bottom: '5%',
            left: '5%',
            itemWidth: 18, // 设置图例项的宽度
            itemHeight: 15, // 设置图例项的高度
            itemGap: 10, // 设置图例项之间的间距
            textStyle: {
                fontSize: 12 // 设置图例文本的字体大小
            }
        },
        title: {
            text: '班级薪资分布',
            left: '10',
            top: '10'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['55%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                // data: [
                //     { value: 4, name: '1万以下' },
                //     { value: 30, name: '1-1.5万' },
                //     { value: 20, name: '1.5万-2万' },
                //     { value: 10, name: '2万以上' }
                // ],
                data: data.map(item => {
                    return {
                        value: item.g_count + item.b_count,
                        name: item.label
                    }
                }),
                color: ['#f0a745', '#6595f7', '#64b9f4', '#66cf9f']
            }
        ]
    };

    myChart.setOption(option)
    return function () {
        myChart.resize()
    }

}

// 柱状
function zhu(data) {
    const mychart = echarts.init(document.querySelector('#lines'))
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            // data: ['阎蕊', '冯洋', '马秀兰', '刘静', '林敏', '陆杰', '毛丽', '许明', '姚秀英', '龚涛'],
            data: data[1].map(item => item.name),
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            min: 0,
            max: 25000,
            interval: 5000,
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '期望薪资',
                type: 'bar',
                barWidth: '30%',
                // data: [20000, 18000, 15000, 17200, 14000, 15000, 12000, 10000, 22000, 14000],
                data: data[1].map(item => item.hope_salary),
                itemStyle: {
                    color: function (params) {
                        var gradientColor = new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#68d0a0' }, // 绿色
                                { offset: 1, color: '#daf4ea' } // 黄色
                            ]
                        );
                        return gradientColor;
                    }
                }
            },
            {
                name: '就业薪资',
                type: 'bar',
                barWidth: '30%',
                // data: [20000, 18000, 15000, 17200, 14000, 15000, 12000, 10000, 22000, 14000],
                data: data[1].map(item => item.salary),
                itemStyle: {
                    color: function (params) {
                        var gradientColor = new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                { offset: 0, color: '#659ee8' }, // 蓝色
                                { offset: 1, color: '#dbe9f9' } // 橙色
                            ]
                        );
                        return gradientColor;
                    }
                }
            }
        ]
    };
    mychart.setOption(option)
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.tagName = 'BUTTON') {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            option.xAxis.data = data[e.target.innerHTML].map(item => item.name)
            option.series[0].data = data[e.target.innerHTML].map(item => item.hope_salary)
            option.series[0].data = data[e.target.innerHTML].map(item => item.salary)
            mychart.setOption(option)


        }
    })
    return function () {
        mychart.resize()
    }
}

// 渲染二饼图
function twoBin(data) {
    const mychart = echarts.init(document.querySelector('#gender'));

    // 定义两个颜色数组分别用于男生和女生的数据
    const boyColors = ['#f0a745', '#6595f7', '#64b9f4', '#66cf9f'];
    const girlColors = ['#f0a745', '#6595f7', '#64b9f4', '#66cf9f'];

    // 根据传入的数据构建数据集
    const datas = [
        data.map(item => ({ value: item.g_count, name: item.label })),
        data.map(item => ({ value: item.b_count, name: item.label }))
    ];

    const option = {
        title: {
            text: '男女薪资分布',
            left: '2%',
            top: '2%',
            textStyle: {
                color: '#000',
                fontWeight: 'bold',
                fontSize: 16,
            }
        },
        tooltip: {
            trigger: 'item'
        },
        graphic: [
            // 上方男生标题
            {
                type: 'text',
                left: 'center',
                top: '48%',
                style: {
                    text: '男生',
                    textAlign: 'center',
                    fill: '#333',
                    fontSize: 14
                }
            },
            // 下方女生标题
            {
                type: 'text',
                left: 'center',
                top: '96%',
                style: {
                    text: '女生',
                    textAlign: 'center',
                    fill: '#333',
                    fontSize: 14
                }
            }
        ],
        series: datas.map(function (data, idx) {
            var top = idx * 50 + 28;
            return {
                type: 'pie',
                radius: ['25%', '40%'],
                center: ['50%', top + '%'],
                itemStyle: {
                    // 使用颜色函数为每个数据项指定颜色
                    color: function (params) {
                        // 根据索引选择不同的颜色数组，并循环使用
                        const colors = idx === 0 ? boyColors : girlColors;
                        return colors[params.dataIndex % colors.length];
                    }
                },
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}', // 包含百分比的标签格式化器
                    rich: {
                        b: {
                            fontSize: 14,
                            color: '#333'
                        },
                        c: {
                            fontSize: 14,
                            color: '#333'
                        },
                        d: {
                            fontSize: 14,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    show: true,
                    length: 10,
                    length2: 10,
                    lineStyle: {
                        width: 1,
                        color: '#333'
                    },
                    smooth: false,
                    curveness: 0
                },
                data: data
            };
        })
    };

    mychart.setOption(option);
    return function () {
        mychart.resize()
    }
}

// MAP
function map(data) {
    const myChart = echarts.init(document.querySelector('#map'))
    const option = {
        visualMap: {
            min: 0,
            max: 10,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            orient: 'horizontal',
            inRange: {
                color: ['#e0ffff', '#006edd'],
                symbolSize: [30, 100]
            }
        },
        tooltip: {
            padding: 8,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
                color: '#fff',
                decoration: 'none',
            }
        },
        series: [{
            name: '就业学生数量',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    label: {
                        show: true
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            label: {
                normal: { //静态的时候展示样式
                    show: true, //是否显示地图省份得名称
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                },
                emphasis: { //动态展示的样式
                    color: '#fff',
                },
            },
            data: [{
                name: '北京',
                value: 0,
            },
            {
                name: '天津',
                value: 0,
            },
            {
                name: '上海',
                value: 0,
            },
            {
                name: '重庆',
                value: 0,
            },
            {
                name: '河北',
                value: 0,
            },
            {
                name: '河南',
                value: 0,
            },
            {
                name: '云南',
                value: 0,
            },
            {
                name: '辽宁',
                value: 0,
            },
            {
                name: '黑龙江',
                value: 0,
            },
            {
                name: '湖南',
                value: 0,
            },
            {
                name: '安徽',
                value: 0,
            },
            {
                name: '山东',
                value: 0,
            },
            {
                name: '新疆',
                value: 0,
            },
            {
                name: '江苏',
                value: 0,
            },
            {
                name: '浙江',
                value: 0,
            },
            {
                name: '江西',
                value: 0,
            },
            {
                name: '湖北',
                value: 0,
            },
            {
                name: '广西',
                value: 0,
            },
            {
                name: '甘肃',
                value: 0,
            },
            {
                name: '山西',
                value: 0,
            },
            {
                name: '内蒙古',
                value: 0,
            },
            {
                name: '陕西',
                value: 0,
            },
            {
                name: '吉林',
                value: 0,
            },
            {
                name: '福建',
                value: 0,
            },
            {
                name: '贵州',
                value: 0,
            },
            {
                name: '广东',
                value: 0,
            },
            {
                name: '青海',
                value: 0,
            },
            {
                name: '西藏',
                value: 0,
            },
            {
                name: '四川',
                value: 0,
            },
            {
                name: '宁夏',
                value: 0,
            },
            {
                name: '海南',
                value: 0,
            },
            {
                name: '台湾',
                value: 0,
            },
            {
                name: '香港',
                value: 0,
            },
            {
                name: '澳门',
                value: 0,
            },
            ]
        },]
    }
    const newData = option.series[0].data.map(item => {
        const city = data.find(city => {
            return city.name.includes(item.name)
        })
        return {
            name: item.name,
            value: city ? city.value : 0
        }
    })
    option.series[0].data = newData
    myChart.setOption(option)

    return function () {
        myChart.resize()
    }
}